import * as THREE from "three";

export default (width, height) => {
  let planeGroup = new THREE.Group();
  const plane1 = createPlane(width, height);
  let plane2 = createPlane(width * 0.99, height * 0.99);
  plane2.position.set(0, 0.05, 0);
  let plane3 = createPlane(width * 0.9, height * 0.9);
  plane3.position.set(0, 0.15, 0);
  planeGroup.add(plane1, plane2, plane3);
  return planeGroup;
};

const createPlane = (width, height) => {
  const planeMaterial = new THREE.MeshBasicMaterial({
    color: "#5C6CFF",
    transparent: true,
    opacity: 0.2,
    side: THREE.DoubleSide
  });

  const planeGeometry = createRoundedPlane(width, height, 0.1, 32);
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotateX(-Math.PI / 2);

  const roundedEdges = createRoundedEdges(width, height, 0.1, 32);
  const lineMaterial = new THREE.LineBasicMaterial({
    color: "#5C6CFF"
  });

  const roundedWireframe = new THREE.LineLoop(roundedEdges, lineMaterial);
  // 设置发光对象的层
  roundedWireframe.layers.set(1);
  plane.add(roundedWireframe);
  return plane;
};

// 创建圆角平面几何体
function createRoundedPlane(width, height, radius, segments) {
  const geometry = new THREE.BufferGeometry();

  // 创建顶点
  const vertices = [];
  const indices = [];

  // 四个角的圆心
  const cx = [width / 2 - radius, -width / 2 + radius, -width / 2 + radius, width / 2 - radius];
  const cy = [height / 2 - radius, height / 2 - radius, -height / 2 + radius, -height / 2 + radius];

  // 添加四个角的圆弧顶点
  let vertexIndex = 0;
  const arcPoints = Math.floor(segments / 4);

  // 存储每个角的顶点
  const cornerPoints = [];

  // 生成圆角顶点
  for (let i = 0; i < 4; i++) {
    cornerPoints[i] = [];

    for (let j = 0; j <= arcPoints; j++) {
      // 修正角度计算，确保圆弧平滑连接
      const angle = (Math.PI / 2) * i + (j * Math.PI) / 2 / arcPoints;
      const x = cx[i] + Math.cos(angle) * radius;
      const y = cy[i] + Math.sin(angle) * radius;
      vertices.push(x, y, 0);
      cornerPoints[i].push(vertexIndex);
      vertexIndex++;
    }
  }

  // 创建三角面索引 - 使用扇形方法
  // 添加中心点
  vertices.push(0, 0, 0);
  const centerIndex = vertexIndex++;

  // 为每个顶点创建扇形三角面
  for (let i = 0; i < 4; i++) {
    const corner = cornerPoints[i];

    for (let j = 0; j < corner.length - 1; j++) {
      indices.push(centerIndex, corner[j], corner[j + 1]);
    }

    // 连接相邻角的最后一个顶点和下一个角的第一个顶点
    if (i < 3) {
      indices.push(centerIndex, corner[corner.length - 1], cornerPoints[i + 1][0]);
    } else {
      // 最后一个角连接到第一个角
      indices.push(centerIndex, corner[corner.length - 1], cornerPoints[0][0]);
    }
  }

  // 设置几何体属性
  geometry.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
  geometry.setIndex(indices);
  geometry.computeVertexNormals();

  return geometry;
}

// 创建圆角边框
function createRoundedEdges(width, height, radius, segments) {
  const points = [];

  // 四个角的圆心
  const cx = [width / 2 - radius, -width / 2 + radius, -width / 2 + radius, width / 2 - radius];
  const cy = [height / 2 - radius, height / 2 - radius, -height / 2 + radius, -height / 2 + radius];

  // 添加四个角的圆弧
  const arcPoints = segments / 4;

  for (let i = 0; i < 4; i++) {
    for (let j = 0; j <= arcPoints; j++) {
      const angle = (Math.PI / 2) * i + (j * Math.PI) / 2 / arcPoints;
      const x = cx[i] + Math.cos(angle) * radius;
      const y = cy[i] + Math.sin(angle) * radius;
      points.push(new THREE.Vector3(x, y, 0));
    }
  }

  // 创建线条几何体
  const edgesGeometry = new THREE.BufferGeometry().setFromPoints(points);
  return edgesGeometry;
}
